<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<uni-forms-item label="费用类型">
						<uni-data-checkbox v-model="FormData.bill_type" :localdata="billType"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item required label="费用名称" name="bill_title">
						<uni-easyinput type="text" v-model="FormData.bill_title" :clearable="false" placeholder="请输入费用名称" />
					</uni-forms-item>
					<uni-forms-item required label="记账金额" name="bill_money">
						<uni-easyinput type="digit" v-model="FormData.bill_money" :clearable="false" placeholder="请输入记账金额" />
					</uni-forms-item>
					<uni-forms-item required label="日期" name="bill_date">
						<picker mode="date" @change="bindDate" :value="FormData.bill_date">
							<view class="picker-input">
								{{ FormData.bill_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="备注" name="bill_desc">
						<uni-easyinput type="textarea" v-model="FormData.bill_desc" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<view class="imgtitle">
						<text class="name">图片</text>
						<text class="tip">(限{{ limit }}张图片，单个图片大小不超过{{ max }}M)</text>
					</view>
					<imageUpload :image="FormData.bill_images" :limit="limit" :max="max" @onChange="imageChange" />
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			type: '',
			limit: 3,
			max: 10,
			FormData: {
				bill_title: '',
				bill_money: '',
				bill_date: '',
				bill_type: 'income',
				is_pay: 1,
				bill_images: '',
				bill_desc: ''
			},
			rules: {
				bill_title: {
					rules: [
						{
							required: true,
							errorMessage: '请填写费用名称'
						}
					]
				},
				bill_money: {
					rules: [
						{
							required: true,
							errorMessage: '请填写记账金额'
						}
					]
				},
				bill_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择日期'
						}
					]
				}
			},
			billType: [
				{
					text: '收入',
					value: 'income'
				},
				{
					text: '支出',
					value: 'payed'
				}
			]
		};
	},
	onLoad(e) {
		this.type = e.type;
		if (e.type == 'rent') {
			this.FormData.rent_sn = e.sn;
		} else if (e.type == 'owner') {
			this.FormData.owner_id = e.id;
			this.FormData.room_id = e.room;
		}
	},
	methods: {
		bindDate(e) {
			this.FormData.bill_date = e.detail.value;
		},
		imageChange(e) {
			this.FormData.bill_images = e.join(',');
		},
		continues(row) {
			if (row.data.is_success) {
				uni.hideLoading();
				uni.showToast({
					title: '添加成功'
				});
				setTimeout(() => {
					uni.hideToast();
					uni.navigateBack();
				}, 1000);
			} else {
				uni.hideLoading();
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				});
			}
		},
		submit() {
			this.$refs.form.validate().then((row) => {
				uni.showLoading()
				if (this.type == 'rent') {
					api.billAdd(this.FormData).then((res) => {
						this.continues(res);
					});
				}else if(this.type == 'owner'){
					api.billOwnerAdd(this.FormData).then((res) => {
						this.continues(res);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.formBox {
	.box {
		padding-bottom: 20rpx;
		.imgtitle {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			.name {
				font-size: 28rpx;
				margin-right: 20rpx;
				color: #606266;
			}
			.tip {
				font-size: 26rpx;
				color: $uni-secondary-color;
			}
		}
	}
}
</style>
